<template>
  <div class="custom-el-main">
    <el-container>
      <el-aside>
        <div class="container">
          <el-scrollbar class="el-aside-scrollbar">
            <tree-component-vue
              :treeData="trees"
              :expandAll="false"
              @OpenTreeItem="OpenTreeItem"
              :treeloadig="treeloadig"
            ></tree-component-vue>
          </el-scrollbar>
        </div>
      </el-aside>
      <el-main>
        <div class="container el-custom-container">
          <table-componets-vue
            ref="table1"
            :isShowButton="true"
            :Sizes="sizes"
            :layout="layout"
            @PageChange="PageChange"
            :currentPage="query.page"
            :pageSize="query.pageSize"
            @tableEvent="tableEvent"
            :loading="tableLoading"
            :isQuery="1 == 1"
            :tables="tables"
            :isOpertions="1 == 1"
            @hyperLinekEvent="hyperLinekEvent"
          ></table-componets-vue>
        </div>
      </el-main>
    </el-container>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showpicturedrawer"
      direction="rtl"
      size="90%"
      :before-close="handleClose"
    >
      <flow-picture-componet-vue
        v-if="showpicturedrawer"
        ref="flowpicture"
        @ClosedEvent="closedEvent"
      >
      </flow-picture-componet-vue>
    </el-drawer>
  </div>
</template>
<script>
import reqVue from "../../utils/req.vue";
import TableComponetsVue from "../../components/TableComponets.vue";
import TreeComponentVue from "../../components/TreeComponent.vue";

import confVue from "../../utils/conf.vue";
import FlowPictureComponetVue from "../../components/Global/FlowPictureComponet.vue";
let windowHeight = parseInt(window.innerHeight);
let windowinnerWidth = parseInt(window.innerWidth);
export default {
  components: {
    TableComponetsVue,
    TreeComponentVue,
    FlowPictureComponetVue,
  },
  data() {
    return {
      trees: [],
      windowHeight: windowHeight,
      windowinnerWidth: windowinnerWidth,
      autoHeight: {},
      outHeight: {
        height: "",
      },
      tables: {},
      sizes: confVue.$size,
      layout: confVue.$layout,
      query: {
        page: 0,
        pageSize: 15,
      },
      btns: [],
      showdrawer: false,
      page_Title: "",
      pageType: "add",
      tableLoading: true,
      formLoading: true,
      formConfig: [],
      formModel: {},
      inModel: {},
      apipath: "flowinfo",
      way: confVue.$flowApi,
      treeloadig: true,
      isSearch: true,
      paramter: {},
      showpicturedrawer: false,
    };
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  created() {
    this.treeloadig = true;
    this.InitTree();
  },
  methods: {
    closedEvent() {
      this.showpicturedrawer = false;
    },
    getHeight() {
      this.outHeight.height = windowHeight - 190 + "px";
      this.autoHeight.height = windowHeight - 190 + "px";
    },
    OpenTreeItem(item) {
      item.forEach((element) => {
        this.InitTable(element, null);
      });
    },
    InitTree(key) {
      this.treeloadig = true;
      this.tableLoading = true;
      reqVue.$Post(null, this.apipath + "/v2.0/flowtree", this.way).then(
        function(data) {
          if (data.status) {
            this.trees = data.body;
            this.InitTable(key == undefined ? this.trees[0] : key, this.query);
            this.treeloadig = false;
          } else {
            this.$message.error(data.message);
          }
        }.bind(this)
      );
    },
    InitTable(tree, queryModel) {
      if (queryModel != undefined && queryModel != null) {
        this.query = queryModel;
      } else {
        this.query.page = 1;
        this.query.pageSize = 15;
      }
      this.query.paramters = [];
      this.query.paramters.push({ label: "flowid", value: tree.parentId });
      this.query.paramters.push({ label: "flowversionid", value: tree.id });
      this.paramter = tree;
      reqVue.$Post(this.query, this.apipath + "/v2.0/instance", this.way).then(
        function(data) {
          if (data.status) {
            this.tables = data.body;
            this.total = data.total;
            this.btns = data.operations;
            this.tableLoading = false;
          } else {
            this.$message.error(data.message);
            window.location.href = "/";
          }
        }.bind(this)
      );
    },
    PageChange(queyModel) {
      this.InitTable(this.paramter, queyModel);
    },
    tableEvent(btn) {
      this.detaileEvent(btn.data);
    }, ///超链接地址跳转
    hyperLinekEvent(para) {
      ///标题的链接
      this.$router.push({
        path: "/process",
        query: {
          flowId: para.data.flowId,
          flowVersionId: para.data.flowVersionId,
          formId: para.data.formId,
          formVersionId: para.data.formVersionId,
          taskId: para.data.taskId,
          callType: "instance",
          approvalType: para.data.processType,
        },
      });
    },
    //展示过程
    detaileEvent(btn) {
      if (btn.value == "detaile") {
        this.showpicturedrawer = true;
        this.$nextTick(function() {
          this.$refs.flowpicture.flowId = btn.parameters.flowId;
          this.$refs.flowpicture.flowVersionId = btn.parameters.flowVersionId;
          this.$refs.flowpicture.taskId = btn.parameters.taskId;
          this.$refs.flowpicture.isProcesView = true;
          this.$refs.flowpicture.InitFlow();
        });
      }
    },
  },
};
</script>
